<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">产品编辑</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm()"
          >提交</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="mt30">
        <el-row>
          <el-col :span="10">
            <el-form-item label="产品编码:" prop="code">
              <el-input v-model="form.code" placeholder="请输入产品编码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="产品名称:" prop="productName">
              <el-input v-model="form.productName" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="产品规格:" prop="specifications">
              <el-input v-model="form.specifications" placeholder="请输入产品规格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品图片:">
              <el-upload
                action="#"
                :file-list="form.shareFileList"
                list-type="picture-card"
                :on-change="onUploadType"
                :auto-upload="false"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
                ref="fileUpload"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.fileUrl" alt="">
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-delete"
                      @click="onRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用方法:">
              <el-upload
                action="#"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-change="onUpload"
                :auto-upload="false"
                multiple
                :limit="1"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { antiCodeEdit, antiCodeDetail } from "@/api/system/antiCode/antiCode"
import { uploadImg } from "@/api/system/upload/upload"
export default {
  name: "edit",
  data(){
    return {
      id: '',
      form: {
        code: '', // 产品编辑
        productName: '', // 产品名称
        specifications: '', // 产品规格
        shareFileList: [], // 产品图片
        methodOfUse: '', // 使用方法
      },
      fileList: [],
      // 表单校验
      rules: {
        code: [
          { required: true, message: "产品编码不能为空", trigger: "blur" }
        ],
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        specifications: [
          { required: true, message: "产品规格不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      antiCodeDetail(this.id).then(res => {
        this.form = res.data
        if(res.data.methodOfUse !== '' && res.data.methodOfUse !== null){
          let url=res.data.methodOfUse,filename
          if (url.indexOf('/') > 0) {
            if (url.indexOf('?') > 0) {
              url = url.split('?')[0]
            }
            //如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
            filename = url.substring(
              url.lastIndexOf('/') + 1,
              url.length
            )
          } 
          let obj = {
            name: filename,
            url: url
          }
          this.fileList.push(obj)
        }
      })
    },
    // 上传产品图片
    onUploadType(item){
      // console.log(item)
      this.$modal.loading("正在上传")
      let formData = new FormData()
      let file = item.raw
      formData.append('file', file)
      uploadImg(formData).then(res => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess("上传成功")
        this.form.shareFileList.push(res.data)
      })
    },
    // 图片删除
    onRemove(item){
      let uploadFiles = this.$refs['fileUpload'].uploadFiles
      let index = uploadFiles.indexOf(item)
      uploadFiles.splice(index, 1)
      const idx = this.form.shareFileList.findIndex(i => i.fileName == item.fileName)
      this.form.shareFileList.splice(idx, 1)
    },
    // 使用方法
    onUpload(item){
      this.$modal.loading("正在上传")
      let formData = new FormData()
      let file = item.raw
      formData.append('file', file)
      uploadImg(formData).then(res => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess("上传成功")
        let obj = {
          name: res.data.fileName,
          url: res.data.fileUrl
        }
        this.fileList.push(obj)
        this.form.methodOfUse= res.data.fileUrl
      })
    },
    handleRemove(item) {
      const a = this.fileList.findIndex(i => i.name == item.name)
      this.fileList.splice(a, 1)
      this.form.methodOfUse = ''
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${ file.name }？`)
    },
    // 提交数据
    submitForm(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.loading("正在提交")
          antiCodeEdit(this.form).then(res=> {
            if(res.code == 200){
              this.$tab.closeOpenPage({ path: "/antiCode/product/list" })
              this.$modal.msgSuccess("修改成功")
              this.$modal.closeLoading()
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-upload--picture-card{
  border-color:#DCDFE6;
  background:#fff;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #5ED4D4;
}
::v-deep .el-upload--picture-card:hover .el-icon-plus{
  color: #5ED4D4;
}
::v-deep .el-table__empty-block{
  display: none;
}
</style>